<template>
  <div>
    <div class="match-performance-items">
      <div class="performanceClass">球员得分</div>
    </div>
    <div class="box-card">
      <el-container>
        <el-header height="57px" class="pass-header">
          <div class="season-selector">
            <el-select
              class="choose-season"
              v-model="type"
              @focus="setMinWidthEmpty"
              style="width:150px"
              placeholder="请选择类别"
            >
              <el-option
                v-for="item in options"
                :key="item.type"
                :label="item.label"
                :value="item.type"
              >
              </el-option>
            </el-select>
          </div>
        </el-header>
        <el-main class="pass-main">
          <AttackRating :season="season" v-if="type === 'attack'" />
          <DefenseRating :season="season" v-if="type === 'defense'" />
          <OrganizeRating :season="season" v-if="type === 'organize'" />
          <SetPieceRating :season="season" v-if="type === 'setPiece'" />
          <SkillRating :season="season" v-if="type === 'skill'" />
          <GoalKeeperRating :season="season" v-if="type === 'goalKeeper'" />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import AttackRating from "./sixType/AttackRating";
import DefenseRating from "./sixType/DefenseRating";
import OrganizeRating from "./sixType/OrganizeRating";
import SetPieceRating from "./sixType/SetPieceRating";
import SkillRating from "./sixType/SkillRating";
import GoalKeeperRating from "./sixType/GoalKeeperRating";
import mixin from "../../mixin/mixin";
export default {
  name: "PlayerRating",
  props: {
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  mixins: [mixin],
  components: {
    AttackRating,
    DefenseRating,
    OrganizeRating,
    SetPieceRating,
    SkillRating,
    GoalKeeperRating,
  },
  data() {
    return {
      //赛季下拉选择框的配置项
      options: [
        {
          type: "attack",
          label: "进攻",
        },
        {
          type: "defense",
          label: "防守",
        },
        {
          type: "organize",
          label: "组织",
        },
        {
          type: "setPiece",
          label: "定位球",
        },
        {
          type: "skill",
          label: "技巧",
        },
        {
          type: "goalKeeper",
          label: "守门",
        },
      ],
      type: "attack",
    };
  },
};
</script>

<style scoped lang="scss">
.match-performance-items {
  display: flex;
  justify-content: flex-start;
  width: 1440px;
  height: 56px;
  margin: 40px auto 0;
  /*background-color: red;*/
}
.performanceClass {
  color: #16c79a;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 152px;
  height: 100%;
  background-color: #194568;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
  div {
    margin-right: 10px;
  }
}
.pass-main {
  height: 830px;
  padding: 0;
  background-color: #f1f6f9;
}
</style>
